<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_terrainAspectCalculation"></title>
    <style>
       #toolbar {
          position: absolute;
          top: 50px;
          right: 10px;
          text-align: center;
          z-index: 100;
          border-radius: 4px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary">
  <div class='panel-heading'>
      <h5 class='panel-title text-center' data-i18n="resources.text_terrainAspectCalculation"></h5></div>
  <div class='panel-body content'>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_terrainAspectCalculation"
              onclick="terrainAspectCalculationProcess()"/>&nbsp;
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_clearLayer"
              onclick="removeTheme()"/>
  </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, options, terrainAspectCalculationResult, themeLayer,
        baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
        dataUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
        serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst",
        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
    map = new maplibregl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [baseUrl],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
            }]
        },
        center: [116.85, 39.79],
        zoom: 7
    });
    map.addControl(new maplibregl.NavigationControl(), 'top-left');
    map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');

    function terrainAspectCalculationProcess() {
        removeTheme();
        var terrainAspectCalculationParameters = new maplibregl.supermap.TerrainAspectCalculationParameters({
            dataset: "JingjinTerrain@Jingjin",
            terrainAnalystSetting: new maplibregl.supermap.terrainAnalystSetting({
              boundsType: maplibregl.supermap.BoundsType.UNION,
              cellSizeType: maplibregl.supermap.CellSizeType.MAX
            }), 
            resultDatasetName:"testAspect", 
            deleteExistResultDataset:true
        }
        );
        new maplibregl.supermap.SpatialAnalystService(serviceUrl).terrainAspectCalculate(terrainAspectCalculationParameters).then(function (serviceResult) {
            terrainAspectCalculationResult = serviceResult.result;
            //用栅格专题图展示分析结果
            showAnalysisResult_ThemeGridRange();
        });

        //构造栅格专题图
        function showAnalysisResult_ThemeGridRange() {
            var themeGridRangeIteme = new maplibregl.supermap.ThemeGridRangeItem({
                    start: -1,
                    end: 0,
                    color: new maplibregl.supermap.ServerColor(60,164,3)
                });
                themeGridRangeIteme0 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 0,
                    end: 22.5,
                    color: new maplibregl.supermap.ServerColor(91,188,11)
                    });
                themeGridRangeIteme1 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 22.5,
                    end: 67.5,
                    color: new maplibregl.supermap.ServerColor(135,211,0)
                }),
                themeGridRangeIteme2 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 67.5,
                    end: 112.5,
                    color: new maplibregl.supermap.ServerColor(193,230,5)
                }),
                themeGridRangeIteme3 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 112.5,
                    end: 157.5,
                    color: new maplibregl.supermap.ServerColor(254,255,0)
                }),
                themeGridRangeIteme4 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 157.5,
                    end: 202.5,
                    color: new maplibregl.supermap.ServerColor(255,190,0)
                }),
                themeGridRangeIteme5 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 202.5,
                    end: 247.5,
                    color: new maplibregl.supermap.ServerColor(255,127,0)
                });
                themeGridRangeIteme6 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 247.5,
                    end: 292.5,
                    color: new maplibregl.supermap.ServerColor(255,63,2)
                });
                themeGridRangeIteme7 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 292.5,
                    end: 337.5,
                    color: new maplibregl.supermap.ServerColor(240,9,0)
                });
                themeGridRangeIteme8 = new maplibregl.supermap.ThemeGridRangeItem({
                    start: 337.5,
                    end: 360,
                    color: new maplibregl.supermap.ServerColor(91,188,11)
                });


            var themeGridRange = new maplibregl.supermap.ThemeGridRange({
                reverseColor: false,
                rangeMode: maplibregl.supermap.RangeMode.EQUALINTERVAL,
                //栅格分段专题图子项数组
                items: [
                    themeGridRangeIteme,
                    themeGridRangeIteme0,
                    themeGridRangeIteme1,
                    themeGridRangeIteme2,
                    themeGridRangeIteme3,
                    themeGridRangeIteme4,
                    themeGridRangeIteme5,
                    themeGridRangeIteme6,
                    themeGridRangeIteme7,
                    themeGridRangeIteme8
                ]
            });

            var themeParameters = new maplibregl.supermap.ThemeParameters({
                //制作专题图的数据集（坡向计算的结果数据集）
                datasetNames: [terrainAspectCalculationResult.dataset.split('@')[0]],
                dataSourceNames: ["Jingjin"],
                joinItems: null,
                themes: [themeGridRange]
            });

            new maplibregl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters).then(function (serviceResult1) {
            var result = serviceResult1.result;
            if (result && result.newResourceID) {
                map.addLayer({
                    "id": "themeLayer",
                    "type": "raster",
                    "source": {
                        "type": "raster",
                        "tiles": [baseUrl + "&transparent=true&cacheEnabled=false&layersID=" + result.newResourceID],
                        "tileSize": 256
                    },
                    "minzoom": 0,
                    "maxzoom": 22
                });
              }
            })
      }
    }

    //移除专题图
    function removeTheme() {
      if (map.getLayer('themeLayer')) {
        map.removeLayer('themeLayer');
        map.removeSource('themeLayer');
      }
    }
</script>
</body>
</html>